<template>
	<view class="diamond-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top">
				<!-- #ifdef APP -->
				<u-navbar title="解锁历史" :autoBack="true" bgColor="transparent" :placeholder="true">></u-navbar>
				<!-- #endif -->
				<view class="tab-list">
					<view :class="tabsIndex==index?'tab-item active':'tab-item'" v-for="(item,index) in tabsList" :key="index"
						@click="tabsChange(index)">{{item.name}}
						<view v-if="userInfo&&index==0" style="margin-left: 4rpx;">{{userInfo.unlock_count}}</view>
						<view v-if="userInfo&&index==1" style="margin-left: 4rpx;">{{userInfo.unlock_my_count}}</view>
					</view>
				</view>
			</view>
			<view class="user-grid">
				<view class="data-item" v-for="(dataItem, dataIndex) in dataList" :key="dataIndex">
					<view class="data-time">
						<view class="dot"></view>
						<view>{{dataItem.formatted_date}}</view>
					</view>
					<view class="user-card-box">
						<view class="user-card" v-for="(item, index) in dataItem.list" :key="index" @click="lookUserDetail(item)">
							<image class="blur-image" :src="$OssUrl(item.user.avatar)" mode="aspectFill">
							</image>
							<view class="user-box">
								<view class="real-user">
									<image class="real-icon" mode="widthFix" src="../../static/common/real_user.png" ></image>
								</view>
								<view class="user-info">
									<text class="name">{{ item.user.nickname }}</text>
								</view>
								<view class="user-detail">
									<text>{{ item.user.age }}岁 | {{ item.user.city }}</text>
									<text class="divider" v-if="item.user.distance">|</text>
									<text class="distance" v-if="item.user.distance">{{ item.user.distance }}km</text>
								</view>
								<image class="chat-icon" src="../../static/common/icon_chat.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<userPopup :show="showUser" @close="showUser=false" :user_id="userDetail&&userDetail.id">
		</userPopup>
	</view>
</template>

<script>
	import userPopup from '@/components/UserPopup.vue';
	export default {
		data() {
			return {
				tabsList: [{
					name: '我解锁的',
					status: '1',
				}, {
					name: '解锁我的',
					status: '2',
				}],
				tabsIndex: 0,
				dataList: [],
				userInfo: null,
				showUser: false,
				userDetail: null,
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onBackPress() {
			if (this.showUser) {
				this.showUser = false
			}
		},
		components: {
			userPopup: userPopup,
		},
		methods: {
			lookUserDetail(item) {
				this.userDetail = item.user
				this.showUser = true
			},
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
				})
			},
			tabsChange(index) {
				this.tabsIndex = index
				this.refreshList()
			},
			refreshList() {
				this.dataList = []
				this.$refs.paging.scrollToTop()
				this.$refs.paging.refresh();
			},
			queryList(pageNo, pageSize) {
				this.$Api['user'].getUnlockLogNew({
					page: pageNo,
					limit: pageSize,
					type: this.tabsList[this.tabsIndex].status
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.diamond-page {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
		position: relative;


		.tab-list {
			min-height: 86rpx;
			margin: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 86rpx;
				color: #A7A5A5;
			}

			.active {
				font-weight: bold;
				position: relative;
				color: #F169F6;
			}

			.active::after {
				content: '';
				position: absolute;
				width: 34rpx;
				height: 8rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #F169F6;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(241, 105, 246, 0.5);
				border-radius: 4rpx;
			}
		}

		.dot {
			width: 12rpx;
			height: 12rpx;
			background: #F169F6;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(241, 105, 246, 0.5);
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.user-grid {
			.data-time {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				margin-left: 30rpx;
				color: #000000;
			}

			.user-card-box {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 20rpx;
				padding: 30rpx;

				.user-card {
					width: 336rpx;
					height: 355rpx;
					background-color: #fff;
					border-radius: 14rpx;
					position: relative;
					background-size: 100% 100%;
					color: #ffffff;

					.blur-image {
						position: absolute;
						z-index: 10;
						width: 100%;
						height: 336rpx;
						border-radius: 14rpx;
					}

					.filter4 {
						filter: blur(4rpx);
					}

					.filter8 {
						filter: blur(8rpx);
					}

					.user-box {
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 10;
					}

					.real-user {
						position: absolute;
						left: 0;
						top: -20rpx;
						width: 138rpx;
						height: 50rpx;
						background: #F169F6;
						border-radius: 12rpx;
						z-index: 10;
						display: flex;
						align-items: center;
						justify-content: center;

						.real-icon {
							width: 100rpx;
						}
					}

					.chat-icon {
						position: absolute;
						right: 20rpx;
						bottom: 52rpx;
						width: 44rpx;
						height: 44rpx;
						z-index: 10;
					}

					.user-info {
						padding: 220rpx 20rpx 10rpx;
						display: flex;
						align-items: center;

						.name {
							font-size: 16px;
							font-weight: bold;
						}
					}

					.user-detail {
						padding: 0 20rpx 20rpx;
						display: flex;
						align-items: center;
						font-size: 12px;

						.divider {
							margin: 0 10rpx;
						}

						.distance {
							color: #F169F6;
							margin-bottom: 10rpx;
						}
					}

					.user-photos {
						display: flex;
						padding: 0 20rpx 20rpx;

						.photo-item {
							width: 80rpx;
							height: 80rpx;
							margin-right: 10rpx;
							background-color: #f0f0f0;
							border-radius: 8rpx;

						}
					}
				}
			}
		}
	}
</style>